<template>
  <div class="addblood">
    <el-dialog :visible="dialogVisible" center>
      <el-form>
        <el-form-item label="检测时间:">
          <el-date-picker
            v-model="form.examTime"
            type="datetime"
            value-format="yyyy-MM-dd hh:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="血糖值(mmol/L):">
          <!-- <el-input
            v-model="form.sugarValue"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '');"
          ></el-input> -->
          <el-input-number v-model="form.sugarValue" :precision="2" :controls="false" :min="0" :max="50"></el-input-number>
        </el-form-item>
        <el-form-item label="检测时间段:">
          <el-select v-model="form.attr" placeholder="请选择活动区域">
            <el-option
              v-for="item of timeslotlist"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addGlucoseRecord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bus from "../homepage/bus";
export default {
  data() {
    return {
      timeslotlist: [
        { label: "空腹", id: 0 },
        { label: "早餐前", id: 1 },
        { label: "早餐后", id: 2 },
        { label: "午餐前", id: 3 },
        { label: "午餐后", id: 4 },
        { label: "晚餐前", id: 5 },
        { label: "晚餐后", id: 6 },
        { label: "睡前", id: 7 },
        { label: "凌晨", id: 8 },
        { label: "随机", id: 9 },
        { label: "0:00", id: 10 },
        { label: "3:00", id: 11 },
        { label: "22:00", id: 12 },
      ],
      form: {
        examTime: "",
        sugarValue: "",
        attr: "",
      },
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  mounted() {},
  methods: {
    closeDialog() {
      this.$parent.setaddBlood(false);
    },
    // 添加血糖
    addGlucoseRecord() {
      let data = this.form;
      let patientID = this.$route.query.id;
      data.userId = patientID;
      this.$api
        .addGlucoseRecord(data)
        .then((res) => {
          this.$message.success(res.message);
          this.$parent.setaddBlood(false);
          bus.$emit("setisActive", true);
        })
        .catch((err) => {
          this.$parent.setaddBlood(false);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.addblood {
  & >>> .el-dialog {
    .el-dialog__headerbtn {
      display: none;
    }
    width: 590px;
    .el-form {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      .el-form-item {
        width: 60%;
        display: flex;
        // background: red;
        justify-content: space-between;
        .el-form-item__label {
          margin: 0;
          width: 140px;
          text-align: left;
        }
        .el-form-item__content {
          .el-input__inner,
          .el-date-editor.el-input {
            width: 180px;
          }
        }
      }
    }
  }
}
</style>